<template>
  <div class="error-page">
    <div class="content-con">
      <img :src="errorStatus.src" :alt="error.statusCode">
      <div class="text-con">
        <h4>{{ error.statusCode }}</h4>
        <h5>{{ errorStatus.desc }}</h5>
      </div>
      <div class="back-btn-group">
          <a-button size="large" type="text" @click="backHome">返回首页</a-button>
          <a-button size="large" type="text" @click="backPrev">返回上一页({{ second }}s)</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import error401 from '~/assets/images/error/error-401.svg';
import error404 from '~/assets/images/error/error-404.svg';
import error500 from '~/assets/images/error/error-500.svg';

export default {
    props: ['error'],
    computed: {
        errorStatus() {
            return {
                401: {
                    src: error401,
                    desc: '登录已失效，请重新登录'
                },
                404: {
                    src: error404,
                    desc: '无权限访问，请联系管理员'
                },
                500: {
                    src: error500,
                    desc: '鬼知道服务器是不是开小差了'
                },
            }[this.error.statusCode]
        },
    },
    data() {
        return {
            second: 10,
            timer: null,
        };
    },
    methods: {
        backHome() {
            this.$router.replace({
                name: '/',
            });
        },
        backPrev() {
            this.$router.go(-1);
        },
    },
    mounted() {
        this.timer = setInterval(() => {
            if (this.second === 0) this.backPrev();
            else this.second--;
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>
<style lang="less" scoped>
.error-page{
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f8f8f9;
  .content-con{
    width: 700px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
    .text-con{
      position: absolute;
      left: 230px;
      top: 0px;
      h4{
        position: absolute;
        left: 0px;
        top: 0px;
        font-size: 80px;
        font-weight: 700;
        color: #348EED;
      }
      h5{
        position: absolute;
        width: 700px;
        left: 0px;
        top: 100px;
        font-size: 20px;
        font-weight: 700;
        color: #67647D;
      }
    }
    .back-btn-group{
      position: absolute;
      right: 0px;
      bottom: 20px;
    }
  }
}
</style>